<template>
<div class="box">
    <div class="login">
        <div class="loginlog">
            <img src="@/assets/img/aboutlogo1.png" alt="" srcset="">
        </div>
        <div class="loginfrom">
            <el-form :model="ruleForm" ref="ruleForm" label-width="70px" class="demo-ruleForm">
                <el-form-item label="账号" prop="name" :rules="
                        [
                            { required: true, message: '请输入账号', trigger: 'blur' }
                        ]">
                    <el-input v-model="ruleForm.name" ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" :rules="
                        [
                            { required: true, message: '请输入密码', trigger: 'blur' }
                        ]">
                    <el-input type="password" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="margin:0px 70px" type="primary" @click="submitForm('ruleForm')">登陆</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
</template>
<script>

export default {
    data(){
        return {
            ruleForm:{}
        }
    },
    methods:{
        submitForm(formName){
             this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http.Get(this.$api.login+"/"+this.ruleForm.name+"/"+this.$md5(this.ruleForm.password),{},(res)=>{
                        this.$cookies.set("token", res)
                        this.$router.push({path:"/dashboard"})
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
          
        }
    }
    
}
</script>

<style scoped>

.box{
    width: 100%;
    height: 100%;
    background: url('../assets/img/backup1.jpg') no-repeat;
    background-size:100% 100%;
    position: absolute;
}
.login{
   display: flex;
   width: 450px; 
   margin: 300px auto;
   background: #fff;
   border-radius: 5px;
   box-shadow: 0px 0px 0px 4px rgba(180, 180, 187, 0.5);
}
.login>div{
    flex: 1;
}

.loginlog{
    margin: 53px 25px;;
    width:max-content;
}

.loginfrom{
    width:max-content;
    margin: 45px 30px 0px 0px;
}

</style>